<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=Q7XlLctUWrzKgK2XVjlkWwVxvFXKMZKj"></script>
    <style type="text/css">
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;

            font-family: "微软雅黑";
        }
        .tangram-suggestion-main {
            z-index: 999999;
        }
        #l-map{height:400px;width:100%;z-index: 100}
        #r-result{width:100%;}
        #suggestId{
            border: 1px solid #ccc;
            padding: 7px 0px;
            border-radius: 3px;
            padding-left:5px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
        }
        input:focus{
            border-color: #66afe9;
            outline: 0;
            x-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
    </style>
</head>
<body class="hold-transition" >
<div id="app" >
    <div class="content-header" >
        <h1>首页
            <small>公司分布图</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>工作台</el-breadcrumb-item>
            <el-breadcrumb-item>地址管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>


    <div class="app-container"  >
        <div class="box" style="height: 700px">
            <div class="excelTitle">
                <el-button @click="__findAddress()" type="primary" >分布图</el-button>
                <el-button  @click="_findPageList()" type="primary"  >详细信息</el-button>
            </div>
            <dl></dl>

            <div v-show="addressVisible" id="allmap"></div>
            <div v-show="addressListVisible" class="filter-container"  id="addressList">
                <el-input placeholder="公司地址" v-model="pagination.queryString" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-button @click="_findPage()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                    <el-table-column prop="address" label="公司地址" align="center"></el-table-column>
                    <el-table-column prop="longitude" label="所在经度" align="center"></el-table-column>
                    <el-table-column prop="latitude" label="所在纬度" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>-->
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                            class="pagiantion"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>

<!--                 新增标签弹层 -->
                <div class="add-form">
                    <el-dialog title="新增公司地址"  :visible.sync="dialogFormVisible"  >

                        <div id="r-result" >
                            <input type="text" id="suggestId" size="30"  value="百度" style="height:20px;width:600px;" />
                            <el-button type="primary" @click="addAddress()" >确定添加</el-button>
                            <input  type="text" id="lat" style="display: none"/>
                            <input type="text" id="lng"  style="display: none"/>
                            <input type="text" id="address" style="display: none">
                        </div>

                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;display: none"></div>
                        <dl></dl>
                        <div id="l-map"></div>

                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    //百度地图API功能
    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//api.map.baidu.com/api?v=2.0&ak=Q7XlLctUWrzKgK2XVjlkWwVxvFXKMZKj&callback=init1";
        document.body.appendChild(script);
    }

    function init1(){
        function G(id) {
            return document.getElementById(id);
        }

        var map3 = new BMap.Map("l-map");
        map3.centerAndZoom("北京", 12);                   // 初始化地图,设置城市和地图级别。

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input": "suggestId"
                , "location": map3
            })


        ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            document.getElementById("address").value = myValue;
            G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
            setPlace();
        });

        function setPlace() {
            map3.clearOverlays();    //清除地图上所有覆盖物
            function myFun() {
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                document.getElementById("lat").value = pp.lat;
                document.getElementById("lng").value = pp.lng;
                map3.centerAndZoom(pp, 18);
                map3.addOverlay(new BMap.Marker(pp));    //添加标注
            }

            var local = new BMap.LocalSearch(map3, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
    }
</script>
<script type="text/javascript">

    //百度地图API功能
    function loadJScript1() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//api.map.baidu.com/api?v=2.0&ak=Q7XlLctUWrzKgK2XVjlkWwVxvFXKMZKj&callback=init";
        document.body.appendChild(script);

    }

    function init() {
        var map = new BMap.Map("allmap");            // 创建Map实例

        // 添加定位控件
        var geolocationControl = new BMap.GeolocationControl();
        geolocationControl.addEventListener("locationSuccess", function (e) {
            // 定位成功事件
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
        });
        geolocationControl.addEventListener("locationError", function (e) {
            // 定位失败事件
            alert(e.message);
        });
        var navigationControl = new BMap.NavigationControl({
            // 靠左上角位置
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation: true
        });

        //经度 longitude;
        //纬度 latitude;
        axios.post("/address/findAll.do").then(data => {

             var point = "北京"; // 创建点坐标

            for (var i = 0; i < data.data.data.length; i++) {
                var marker = new BMap.Marker(new BMap.Point(data.data.data[i].longitude, data.data.data[i].latitude));  // 创建标注
                var content = data.data.data[i].address + "   :经度:" + data.data.data[i].longitude + " 纬度:" + data.data.data[i].latitude;
                map.addOverlay(marker);               // 将标注添加到地图中
                addClickHandler(content, marker);
                var label = new BMap.Label(data.data.data[i].address, {offset: new BMap.Size(20, -10)});
                marker.setLabel(label);
                point = new BMap.Point(data.data.data[0].longitude, data.data.data[0].latitude); // 创建点坐标
            }
            map.addControl(geolocationControl);
            map.addControl(navigationControl);
            map.centerAndZoom(point, 15);
            map.enableScrollWheelZoom();                 //启用滚轮放大缩小
        });


        var opts = {
            width: 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title: "信息窗口", // 信息窗口标题
            enableMessage: true//设置允许信息窗发送短息
        };

        function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                    openInfo(content, e)
                }
            );
        }

        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }
    }

    window.onload = loadJScript1;  //异步加载地图
</script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            dataList: [],//当前页要展示的分页列表数据
            dialogFormVisible: false,//增加表单是否可见
            addressVisible:true,//地图是否可见
            addressListVisible:false,//地图列表是否可见
            longitude:"哈哈",
            latitude:"哈哈",
        },
        // created() {
        //     this.findPage();//VUE对象初始化完成后调用分页查询方法，完成分页查询
        // },
        methods: {
            // 弹出添加窗口
            handleCreate() {
                //弹出新增窗口
                this.dialogFormVisible = true;
                loadJScript();
            },
            //分页查询
            findPage() {
                //分页参数
                var param = {
                    currentPage: this.pagination.currentPage,//页码
                    pageSize:this.pagination.pageSize,//每页显示的记录数
                    queryString: this.pagination.queryString//查询条件
                };
                //请求后台
                axios.post("/address/findPage.do",param).then(response=>{
                    //为模型数据赋值，基于vue的双向绑定展示到页面
                    this.dataList=response.data.rows;
                    this.pagination.total=response.data.total;
                })
             } ,
            //切换页码
            handleCurrentChange(currentPage) {
                //currentPage为切换后的页码
                this.pagination.currentPage=currentPage;
                this.findPage();
            },
            _findPage(){
                this.pagination.currentPage=1;
                this.findPage();
            },
            _findPageList(){
                this.addressListVisible=true;
                this.addressVisible=false;
                this.findPage();
            },
            __findAddress(){
                this.addressListVisible=false;
                this.addressVisible=true;
                loadJScript1();
            },
            // 删除
            handleDelete(row) {//row其实是一个json对象，json对象的结构为{"age":"0-100","attention":"无","code":"0011","id":38,"name":"白细胞计数","price":10.0,"remark":"白细胞计数","sex":"0","type":"2"}
                //alert(row.id);
                this.$confirm("你确定要删除当前数据吗？","提示",{//确认框
                    type:'warning'
                }).then(()=>{
                    //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
                    axios.get("/address/delete.do?id=" + row.id).then((res) => {
                        if(res.data.flag){
                            //执行成功
                            //弹出成功提示信息
                            this.$message({
                                type:'success',
                                message:res.data.message
                            });
                            //重新进行分页查询
                            this.findPage();
                        }else{
                            //执行失败
                            this.$message.error(res.data.message);
                        }
                    });
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'操作已取消'
                    });
                });
            },

            //经度 longitude;
            //纬度 latitude;
            addAddress(){
                address=document.getElementById("address").value;
                latitude=document.getElementById("lat").value;
                longitude=document.getElementById("lng").value;
                data={"address":address,"latitude":latitude,"longitude":longitude};
                axios.post("/address/add.do",data).then(res=>{
                    //关闭添加窗口
                    this.dialogFormVisible=false;
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? 'success' : 'error'
                    })
                }).finally(()=>{
                    this.findPage();
                })
            },
        }
    })
</script>

</html>
